import React from "react";
import store from "../../store/wwj/index";
import "../../assets/hm/css/index.modules.css";
import { SET_PRODUCTS } from "../../store/hm/actionCreater";
class TABS extends React.Component {
    constructor() {
        super();
        this.state = {
            data: {}
        };
    }
    componentDidMount() {
        store.dispatch(SET_PRODUCTS(this.state.data.id));
    }

    componentWillMount() {
        this.setState({
            data: JSON.parse(localStorage.getItem("songdata"))
        });
    }
    huiqu() {
        this.props.history.push("/rem");
    }
    getsongid(i) {
        let songid1 = store.getState().Productreducer.playlist.tracks[i].id;
        let songid = { i: i, id: songid1 };
        localStorage.setItem("songid", JSON.stringify(songid));
    }
    render() {
        let tracks = store.getState().Productreducer.playlist.tracks;

        return (
            <div className="bestbox">
                <div className="top">
                    <header className="hmheader">
                        <div className="zuobox">
                            <img
                                onClick={this.huiqu.bind(this)}
                                className="zuo"
                                src={require("../../assets/hm/img/zuo.png")}
                                alt=""
                            />
                        </div>
                        <span className="gedan">歌单</span>
                        <h1
                            style={{
                                clear: "both",
                                height: 0,
                                overflow: "hidden"
                            }}
                        >
                            1
                        </h1>
                    </header>
                    <nav className="hmnav">
                        <div className="hmimg">
                            <img
                                className="kunkun"
                                src={
                                    store.getState().Productreducer.playlist
                                        .coverImgUrl
                                }
                                alt=""
                            />
                            <div className="small">
                                <span className="renqi">
                                    {Math.round(
                                        this.state.data.playCount / 1000
                                    ) / 10}
                                    万
                                </span>
                                <img
                                    className="erji"
                                    src={require("../../assets/hm/img/erji.png")}
                                    alt=""
                                />
                            </div>
                        </div>
                        <div className="right">
                            <h1 className="jianjie">
                                {store.getState().Productreducer.playlist.name}
                            </h1>
                            <span className="zuozhe">
                                {
                                    store.getState().Productreducer.playlist
                                        .creator.nickname
                                }
                            </span>
                        </div>
                    </nav>
                    <footer className="hmfooter">
                        <div className="pinlun">
                            <img
                                src={require("../../assets/hm/img/xiaoxi.png")}
                                alt=""
                            />
                            <p>评论</p>
                        </div>
                        <div className="dianzan">
                            <img
                                src={require("../../assets/hm/img/aixin.png")}
                                alt=""
                            />
                            <p>点赞</p>
                        </div>
                        <div className="shoucang">
                            <img
                                src={require("../../assets/hm/img/jia.png")}
                                alt=""
                            />
                            <p>收藏</p>
                        </div>
                        <div className="gengduo">
                            <img
                                src={require("../../assets/hm/img/gengduo.png")}
                                alt=""
                            />
                            <p>更多</p>
                        </div>
                    </footer>
                </div>
                <div className="bgimgbox">
                    <img
                        className="bgimg"
                        src={
                            store.getState().Productreducer.playlist.coverImgUrl
                        }
                        alt=""
                    />
                </div>
                <div className="hmmohu"></div>
                <div className="bottom">
                    <div className="bofang">
                        <div className="bofangleft">
                            <div className="xiaobofangbox">
                                <img
                                    className="xiaobofang"
                                    src={require("../../assets/hm/img/bofang.png")}
                                    alt=""
                                />
                            </div>
                            <div className="quanbu">
                                <span className="s1">播放全部</span>
                                <span className="s2">
                                    (共{tracks.length}首)
                                </span>
                            </div>
                            <h1
                                style={{
                                    clear: "both",
                                    height: 0,
                                    overflow: "hidden"
                                }}
                            >
                                1
                            </h1>
                        </div>
                        <div className="hongshoucang">
                            <img
                                className="hongjia"
                                src={require("../../assets/hm/img/jia.png")}
                                alt=""
                            />
                            <span>收藏</span>
                            <span>
                                (
                                {Math.round(this.state.data.playCount / 1000) /
                                    10}
                                万)
                            </span>
                        </div>
                    </div>
                    <ul>
                        {tracks.map((item, index) => {
                            return (
                                <li
                                    onClick={this.getsongid.bind(this, index)}
                                    className="hmli"
                                    key={index}
                                >
                                    <div className="index">{index + 1}</div>
                                    <div className="indexright">
                                        <p className="geming">{item.name}</p>
                                        <p className="yanchangzhe">
                                            {item.ar[0].name}-{item.name}
                                        </p>
                                    </div>
                                </li>
                            );
                        })}
                    </ul>
                </div>
            </div>
        );
    }
}

export default TABS;
